<script lang="ts" setup>
import { Dialog } from 'vant'

const props = withDefaults(defineProps<{
  dangerAction: () => void
  wait?: number
  reason?: string
}>(), {
  wait: 5,
  reason: '你确定要进行该操作吗?',
})
const shown = ref(true)
const counter = ref(0)
const interval = ref(0)

onMounted(() => {
  counter.value = props.wait

  const cd = () => {
    counter.value -= 1
    if (counter.value === 0) {
      window.clearInterval(interval.value)
    }
  }

  window.clearInterval(interval.value)
  interval.value = window.setInterval(cd, 1000)
})

function onConfirm() {
  shown.value = false
  props.dangerAction()
}

const comfirmText = computed(() => {
  return counter.value > 0 ? `确认 ${(counter.value)}` : '确认'
})
</script>

<template>
  <div>
    <Dialog
      v-model:show="shown"
      title="注意"
      :message="reason"
      show-cancel-button
      :confirm-button-disabled="counter > 0"
      :confirm-button-text="comfirmText"
      confirm-button-color="red"
      :close-on-click-overlay="true"
      @cancel="shown = false"
      @confirm="onConfirm"
    />
  </div>
</template>

<style scoped>

</style>
